<template>
  <div class="datasam-container">
    <!-- 筛选条件区域 -->
    <div class="filter-section">
      <div class="filter-row">
        <div class="filter-item">
          <label>省份:</label>
          <el-select v-model="filterParams.province" placeholder="请选择省份" clearable @change="handleProvinceChange">
            <el-option v-for="option in filterOptions.provinces" :key="option.value" :label="option.label" :value="option.value"></el-option>
          </el-select>
        </div>
        <div class="filter-item">
          <label>城市:</label>
          <el-select v-model="filterParams.city" placeholder="请选择城市" clearable @change="handleCityChange">
            <el-option v-for="option in filterOptions.cities" :key="option.value" :label="option.label" :value="option.value"></el-option>
          </el-select>
        </div>
        <div class="filter-item">
          <label>区县:</label>
          <el-select v-model="filterParams.area" placeholder="请选择区县" clearable>
            <el-option v-for="option in filterOptions.areas" :key="option.value" :label="option.label" :value="option.value"></el-option>
          </el-select>
        </div>
        
        <div class="filter-item">
          <label>竞品类型:</label>
          <el-select v-model="filterParams.project_prop" placeholder="请选择竞品类型" clearable>
            <el-option v-for="option in filterOptions.projectProps" :key="option.value" :label="option.label" :value="option.value"></el-option>
          </el-select>
        </div>
        
     
        
        <div class="filter-item">
          <label>租售类型:</label>
          <el-select v-model="filterParams.project_type" placeholder="请选择租售类型" clearable>
            <el-option v-for="option in filterOptions.projectTypes" :key="option.value" :label="option.label" :value="option.value"></el-option>
          </el-select>
        </div>
      </div>
      
      <div class="filter-row">
        <div class="filter-item">
          <label>我司项目:</label>
          <el-select v-model="filterParams.compete_project_name" placeholder="请选择我司项目" clearable filterable>
            <el-option v-for="option in filterOptions.competeProjectNames" :key="option.value" :label="option.label" :value="option.value"></el-option>
          </el-select>
        </div>
        
        <div class="filter-item">
          <label>区域总:</label>
          <el-select v-model="filterParams.chief_region_manager" placeholder="请选择区域总" clearable @change="handleRegionManagerChange">
            <el-option v-for="option in filterOptions.regionManagers" :key="option.value" :label="option.label" :value="option.value"></el-option>
          </el-select>
        </div>
        
        <div class="filter-item">
          <label>总监:</label>
          <el-select v-model="filterParams.chief_director" placeholder="请选择总监" clearable @change="handleDirectorChange">
            <el-option v-for="option in filterOptions.directors" :key="option.value" :label="option.label" :value="option.value"></el-option>
          </el-select>
        </div>
        <div class="filter-item">
          <label>日期:</label>
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期">
    </el-date-picker>
        </div>
      
      </div>
      
      <div class="filter-row">
  
        
        <div class="filter-actions">
          <el-button type="primary" @click="searchData">查询</el-button>
          <el-button @click="resetFilter">重置</el-button>
          <el-button type="success" @click="exportData">导出</el-button>
        </div>
      </div>
    </div>

    <!-- 数据表格区域 -->
    <div class="table-section">
      <el-table 
        :data="tableData" 
        v-loading="loading"
        border
        stripe
        style="width: 100%; flex: 1;" 
        :height="tableHeight"
        show-summary
        :summary-method="getSummaries">
        <el-table-column prop="project_name" label="竞品项目名称" width="180" fixed="left"></el-table-column>
        <el-table-column prop="compete_project_name" label="我司对标项目" width="180" fixed="left"></el-table-column>
        <el-table-column prop="project_prop" label="竞品类型" min-width="180" fixed="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="friend_dev_company" label="开发商/运营商" min-width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="province" label="所在省份" width="120"></el-table-column>
                        <el-table-column prop="city" label="所在城市" width="120"></el-table-column>
        <el-table-column prop="area" label="所在区域" width="120"></el-table-column>
        <el-table-column prop="synx" label="项目类型/产权年限" width="120"></el-table-column>
        <el-table-column prop="open_time" label="开盘时间" width="120"></el-table-column>
        <el-table-column prop="compete_project_distance" label="竞品距本案直线距离" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="dqygh" label="大区域规划" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="xqdl" label="小区域环境" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="yzdkms" label="已摘地块亩数" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="zjzmj" label="总建筑面积（㎡）" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="total_sell_area" label="厂房可售面积（㎡）" width="130">
          <template slot-scope="scope">
            <span>{{ formatArea(scope.row.total_sell_area) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="fqqk" label="分期/分批次情况" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="xfkcxsmj" label="现房库存面积（㎡）" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="qfkcxsmj" label="期房库存面积（㎡）" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="yzskcmj" label="预招商库存面积（㎡）" width="180">
          <template slot-scope="scope">
            <span>{{ formatArea(scope.row.yzskcmj) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="clzxsmj" label="未售存量面积（㎡）" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="project_process" label="工程进度" width="120" show-overflow-tooltip></el-table-column>
        <el-table-column prop="yjjfsj" label="交付时间" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="productType_areaSegment" label="产品类型及面积段" min-width="180" show-overflow-tooltip></el-table-column>

        <el-table-column prop="cppb" label="产品配比" min-width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="floor_height" label="层高" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="bear_weight" label="承重" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="steel_structure_single" label="单层钢结构（㎡）" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="single_or_duplex" label="独栋或双拼（㎡）" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="floor_count" label="分层（㎡）" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="market_pricel" label="报价" width="120" show-overflow-tooltip></el-table-column>
        <el-table-column prop="expect_price" label="销售价格" width="120" show-overflow-tooltip></el-table-column>
        <el-table-column prop="sfkbl" label="首付款比例" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="wyf" label="物业收费标准" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="year21_sold_area" label="21年去化" width="100">
          <template slot-scope="scope">
            <span>{{ formatArea(scope.row.year21_sold_area) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="year22_sold_area" label="22年去化" width="100">
          <template slot-scope="scope">
            <span>{{ formatArea(scope.row.year22_sold_area) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="year23_sold_area" label="23年去化" width="100">
          <template slot-scope="scope">
            <span>{{ formatArea(scope.row.year23_sold_area) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="year24_sold_area" label="24年去化" width="100">
          <template slot-scope="scope">
            <span>{{ formatArea(scope.row.year24_sold_area) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="year25_sold_area" label="25年去化" width="100">
          <template slot-scope="scope">
            <span>{{ formatArea(scope.row.year25_sold_area) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sold_area_2025_q1" label="25年一季度去化面积（㎡）" width="100">
          <template slot-scope="scope">
            <span>{{ formatArea(scope.row.sold_area_2025_q1) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sold_area_2025_q2" label="25年二季度去化面积（㎡）" width="100">
          <template slot-scope="scope">
            <span>{{ formatArea(scope.row.sold_area_2025_q2) }}</span>
          </template>
        </el-table-column>
    
        <el-table-column prop="sold_area_2025_q3" label="25年三季度去化面积（㎡）" width="100">
          <template slot-scope="scope">
            <span>{{ formatArea(scope.row.sold_area_2025_q3) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sold_area_2025_q4" label="25年四季度去化面积（㎡）" width="100">
          <template slot-scope="scope">
            <span>{{ formatArea(scope.row.sold_area_2025_q4) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="customer_form" label="成交客户来源" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="customer_target" label="成交客户所属行业" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="khryhyyq" label="客户入园行业要求" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="tax_requirement" label="税收要求及合同税收条款表述" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="maybe_punish" label="客户违约罚则" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="rypz" label="团队人员配置" min-width="180" show-overflow-tooltip></el-table-column>   
      </el-table>
      
      <!-- 分页组件 -->
      <div class="pagination-wrapper">
        <el-pagination
          :current-page="pagination.page"
          :page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Datasam',
  data() {
    return {
      // 筛选参数
      filterParams: {
        chief_region_manager: null,    // 区域总
        chief_director: null,          // 总监
        province: null,                // 省
        project_type: null,            // 租售类型
        city: null,                    // 市
        area: null,                    // 区县
        project_prop: null,            // 竞品类型
        compete_project_name: null,    // 我司项目
        start_time: null,              // 开始时间
        end_time: null,                // 结束时间
        completion_rate: null,         // 完成率
        project_category: null         // 项目分类
      },
      // 分页参数
      pagination: {
        page: 1,
        size: 10,
        total: 0
      },
      // 表格数据
      tableData: [],
      summaryData: {}, // 存储汇总数据
      loading: false,
      tableHeight: 500,
      // 筛选选项数据
      filterOptions: {
        provinces: [],
        cities: [],
        areas: [],
        projectTypes: [],
        projectProps: [],
        competeProjectNames: [],
        regionManagers: [],
        directors: []
      }
    }
  },
    mounted() {
    this.fetchData()    
    this.loadFilterOptions()
    this.calculateTableHeight()
    
    // 监听窗口大小变化
    window.addEventListener('resize', this.calculateTableHeight)
  },
  
  beforeDestroy() {
    window.removeEventListener('resize', this.calculateTableHeight)
  },
  methods: {
    // 获取数据
    async fetchData() {
      this.loading = true
      try {
        const params = {
          ...this.filterParams,
          page: this.pagination.page,
          size: this.pagination.size
        }
        
        // 过滤掉空值参数
        const filteredParams = Object.keys(params).reduce((acc, key) => {
          if (params[key] !== null && params[key] !== '') {
            acc[key] = params[key]
          }
          return acc
        }, {})
        
        const response = await axios.get('/api/ld_competitor/get_synchronize_data', {
          params: filteredParams
        })
        
        // 处理实际的API响应结构 - 双层嵌套
        if (response.data && response.data.data && response.data.data.data && response.data.data.data.projects) {
          this.tableData = response.data.data.data.projects
          this.pagination.total = response.data.data.data.total_count || 0
          
          // 提取汇总数据
          if (response.data.data.summary_data) {
            this.summaryData = response.data.data.summary_data
            console.log('Summary Data:', this.summaryData)
            console.log('Summary Data 字段数量:', Object.keys(this.summaryData).length)
          }
          
          this.$message.success('数据加载成功')
        } else {
          this.$message.error('获取数据失败：数据结构异常')
        }
      } catch (error) {
        this.$message.error('网络请求失败，请稍后重试')
      } finally {
        this.loading = false
      }
    },

    // 查询数据
    searchData() {
      this.pagination.page = 1
      this.fetchData()
    },

    // 重置筛选条件
    resetFilter() {
      Object.keys(this.filterParams).forEach(key => {
        this.filterParams[key] = null
      })
      this.pagination.page = 1
      this.fetchData()
    },

    // 分页大小改变
    handleSizeChange(newSize) {
      this.pagination.size = newSize
      this.pagination.page = 1
      this.fetchData()
    },

    // 当前页改变
    handleCurrentChange(newPage) {
      this.pagination.page = newPage
      this.fetchData()
    },

    // 获取状态类型
    getStatusType(status) {
      const statusMap = {
        1: 'success',
        2: 'warning', 
        3: 'danger',
        0: 'info'
      }
      return statusMap[status] || 'info'
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        1: '正常',
        2: '待审核',
        3: '已停用',
        0: '草稿'
      }
      return statusMap[status] || '未知'
    },

    // 查看详情
    viewDetail(row) {
      this.$message.info(`查看项目: ${row.project_name || row.compete_project_name}`)
    },

    // 编辑项目
    editItem(row) {
      this.$message.info(`编辑项目: ${row.project_name || row.compete_project_name}`)
    },

    // 格式化面积
    formatArea(area) {
      if (!area || area === '0' || area === '') return '0'
      // 如果是数字，添加平方米单位
      const numArea = parseFloat(area)
      if (!isNaN(numArea)) {
        return `${numArea.toLocaleString()}`
      }
      return area
    },

    // 格式化价格
    formatPrice(price) {
      if (!price || price === '0' || price === '') return '0'
      // 如果是数字，添加元/㎡单位
      const numPrice = parseFloat(price)
      if (!isNaN(numPrice)) {
        return `${numPrice.toLocaleString()}元/㎡`
      }
      return price
    },

    // 导出数据
    async exportData() {
      this.$message.info('正在准备导出数据...')
      
      try {
        // 构建与查询相同的参数，但不包含分页参数
        const params = { ...this.filterParams }
        
        // 过滤掉空值参数
        const filteredParams = Object.keys(params).reduce((acc, key) => {
          if (params[key] !== null && params[key] !== '') {
            acc[key] = params[key]
          }
          return acc
        }, {})
        
        // 调用CSV导出接口
        const response = await axios.get('/api/ld_competitor/get_synchronize_data/csv', {
          params: filteredParams,
          responseType: 'blob' // 重要：设置响应类型为blob以处理文件下载
        })
        
        // 创建下载链接
        const blob = new Blob([response.data], { type: 'text/csv;charset=utf-8' })
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        
        // 设置文件名
        const fileName = `竞品数据_${new Date().toISOString().slice(0, 10)}.csv`
        link.setAttribute('download', fileName)
        
        // 触发下载
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)
        
        this.$message.success('数据导出成功')
        
      } catch (error) {
        this.$message.error('导出失败: ' + (error.message || '未知错误'))
      }
    },

        // 加载筛选选项数据
    async loadFilterOptions() {
      try {
        // 1. 加载省份数据
        const provincesRes = await axios.get('/api/enum/get_city?level=1')
        if (provincesRes.data && provincesRes.data.success) {
          this.filterOptions.provinces = provincesRes.data.data.map(item => ({
            label: item.name,
            value: item.name,
            id: item.id
          }))
        }

        // 2. 加载项目类型（租售类型）
        const projectTypesRes = await axios.get('/api/enum/get_project_type')
        if (projectTypesRes.data && projectTypesRes.data.success) {
          this.filterOptions.projectTypes = projectTypesRes.data.data.map(type => ({
            label: type,
            value: type
          }))
        }

        // 3. 加载竞品类型
        const projectPropsRes = await axios.get('/api/enum/get_project_prop')
        if (projectPropsRes.data && projectPropsRes.data.success) {
          // 过滤掉空数据
          const validProps = projectPropsRes.data.data.filter(prop => 
            prop && prop.toString().trim() !== ''
          )
          
          this.filterOptions.projectProps = validProps.map(prop => ({
            label: prop,
            value: prop
          }))
        }

        // 4. 加载我司项目
        this.loadCompeteProjectNames()

        // 5. 加载租售项目数据（包含区域总和总监）
        this.loadRegionManagersAndDirectors()
        
      } catch (error) {
        this.$message.error('加载筛选选项失败: ' + (error.message || '未知错误'))
      }
    },

    // 省份改变时加载城市数据
    handleProvinceChange(province) {
      if (!province) {
        this.filterOptions.cities = []
        this.filterOptions.areas = []
        this.filterParams.city = null
        this.filterParams.area = null
        this.filterParams.compete_project_name = null // 清空我司项目
        this.loadCompeteProjectNames() // 重新加载我司项目
        return
      }

      // 根据省份获取城市数据
      const provinceItem = this.filterOptions.provinces.find(p => p.value === province)
      if (provinceItem) {
        this.loadCitiesByProvinceId(provinceItem.id)
      }
    },

    // 根据省份ID加载城市
    async loadCitiesByProvinceId(provinceId) {
      try {
        const response = await axios.get(`/api/enum/get_city?parent_id=${provinceId}&level=2`)
        if (response.data && response.data.success) {
          this.filterOptions.cities = response.data.data.map(item => ({
            label: item.name,
            value: item.name,
            id: item.id
          }))
        }
        // 清空区县数据
        this.filterOptions.areas = []
        this.filterParams.city = null
        this.filterParams.area = null
      } catch (error) {
        // 静默处理错误
      }
    },

    // 城市改变时加载区县数据
    handleCityChange(city) {
      if (!city) {
        this.filterOptions.areas = []
        this.filterParams.area = null
        this.filterParams.compete_project_name = null // 清空我司项目
        this.loadCompeteProjectNames() // 重新加载我司项目
        // 城市清空时，重新加载全部区域总和总监数据
        this.loadRegionManagersAndDirectors()
        return
      }

      // 根据城市获取区县数据
      const cityItem = this.filterOptions.cities.find(c => c.value === city)
      if (cityItem) {
        this.loadAreasByCityId(cityItem.id)
      }
      
      // 根据选中的城市重新加载区域总和总监数据
      this.loadRegionManagersAndDirectors(city)
      
      // 根据选中的城市重新加载我司项目数据
      this.loadCompeteProjectNames()
    },

    // 区域总改变时重新加载我司项目数据
    handleRegionManagerChange() {
      this.loadCompeteProjectNames()
    },

    // 总监改变时重新加载我司项目数据
    handleDirectorChange() {
      this.loadCompeteProjectNames()
    },

    // 根据城市ID加载区县
    async loadAreasByCityId(cityId) {
      try {
        const response = await axios.get(`/api/enum/get_city?parent_id=${cityId}&level=3`)
        if (response.data && response.data.success) {
          this.filterOptions.areas = response.data.data.map(item => ({
            label: item.name,
            value: item.name,
            id: item.id
          }))
        }
        this.filterParams.area = null
      } catch (error) {
        // 静默处理错误
      }
    },

    // 加载我司项目数据
    async loadCompeteProjectNames() {
      try {
        const competeProjectParams = {
          city: this.filterParams.city || '',
          chief_region_manager: this.filterParams.chief_region_manager || '',
          chief_director: this.filterParams.chief_director || ''
        }
        const competeProjectNamesRes = await axios.get('/api/enum/get_compete_project_names', {
          params: competeProjectParams
        })
        if (competeProjectNamesRes.data && competeProjectNamesRes.data.success) {
          this.filterOptions.competeProjectNames = competeProjectNamesRes.data.data.map(name => ({
            label: name,
            value: name
          }))
          
          // 如果当前选中的我司项目在新数据中不存在，则清空选择
          if (this.filterParams.compete_project_name && 
              !competeProjectNamesRes.data.data.includes(this.filterParams.compete_project_name)) {
            this.filterParams.compete_project_name = null
          }
        }
      } catch (error) {
        this.$message.error('加载我司项目数据失败: ' + (error.message || '未知错误'))
      }
    },

    // 加载区域总和总监数据
    async loadRegionManagersAndDirectors(city = null) {
      try {
        let url = '/api/enum/rental_sales'
        const params = {}
        
        // 如果传入了城市参数，则添加到请求参数中
        if (city) {
          params.city = city
        }
        
        const rentalSalesRes = await axios.get(url, { params })
        if (rentalSalesRes.data && rentalSalesRes.data.success) {
          const data = rentalSalesRes.data.data
          
          // 提取区域总选项
          const regionManagers = [...new Set(data.map(item => item.chief_region_manager).filter(Boolean))]
          this.filterOptions.regionManagers = regionManagers.map(name => ({
            label: name,
            value: name
          }))
          
          // 提取总监选项
          const directors = [...new Set(data.map(item => item.chief_director).filter(Boolean))]
          this.filterOptions.directors = directors.map(name => ({
            label: name,
            value: name
          }))
          
          // 如果当前选中的区域总或总监在新数据中不存在，则清空选择
          if (this.filterParams.chief_region_manager && 
              !regionManagers.includes(this.filterParams.chief_region_manager)) {
            this.filterParams.chief_region_manager = null
          }
          
          if (this.filterParams.chief_director && 
              !directors.includes(this.filterParams.chief_director)) {
            this.filterParams.chief_director = null
          }
        }
      } catch (error) {
        this.$message.error('加载区域总和总监数据失败: ' + (error.message || '未知错误'))
      }
    },

    // 计算表格高度
    calculateTableHeight() {
      this.$nextTick(() => {
        const windowHeight = window.innerHeight
        // 减去筛选区域、分页、边距等高度，大概280px
        this.tableHeight = windowHeight - 280
      })
    },

    // 获取汇总数据
    getSummaries(param) {
      const { columns } = param
      const sums = []
      
      columns.forEach((column, index) => {
        if (index === 0) {
          // 第一列显示"总计"
          sums[index] = '总计'
          return
        }

        const property = column.property
        
        // 根据列属性映射到summary_data中对应的字段
        const summaryMap = {
          'yzdkms': 'yzdkms_summary',                    // 已摘地块亩数
          'zjzmj': 'zjzmj_summary',                      // 总建筑面积
          'total_sell_area': 'total_sell_area_summary',  // 厂房可售面积
          'xfkcxsmj': 'xfkcxsmj_summary',               // 现房库存面积
          'qfkcxsmj': 'qfkcxsmj_summary',               // 期房库存面积
          'yzskcmj': 'yzskcmj_summary',                 // 预招商库存面积
          'clzxsmj': 'clzxsmj_summary',                 // 未售存量面积
          'steel_structure_single': 'steel_structure_single_summary', // 单层钢结构
          'single_or_duplex': 'single_or_duplex_summary',             // 独栋或双拼
          'floor_count': 'floor_count_summary',                       // 分层
          'year21_sold_area': 'year21_sold_area_summary',             // 21年去化
          'year22_sold_area': 'year22_sold_area_summary',             // 22年去化
          'year23_sold_area': 'year23_sold_area_summary',             // 23年去化
          'year24_sold_area': 'year24_sold_area_summary',             // 24年去化
          'year25_sold_area': 'year25_sold_area_summary',             // 25年去化
          'sold_area_2025_q1': 'sold_area_2025_q1_summary',          // 25年一季度去化
          'sold_area_2025_q2': 'sold_area_2025_q2_summary',          // 25年二季度去化
          'sold_area_2025_q3': 'sold_area_2025_q3_summary',          // 25年三季度去化
          'sold_area_2025_q4': 'sold_area_2025_q4_summary'           // 25年四季度去化
        }

        const summaryKey = summaryMap[property]
        if (summaryKey && this.summaryData[summaryKey] !== undefined) {
          const value = this.summaryData[summaryKey]
          // 对于面积相关字段，进行格式化显示
          if (property.includes('area') || property.includes('mj') || property.includes('kms') || property.includes('sold')) {
            sums[index] = this.formatArea(value)
          } else {
            sums[index] = value ? value.toLocaleString() : '0'
          }
        } else {
          // 非数值列不显示汇总
          sums[index] = ''
        }
      })

      return sums
    }
  },

}
</script>

<style scoped>
.datasam-container {
  padding: 15px;
  background: #f5f5f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.filter-section {
  background: white;
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}

.filter-row:last-child {
  margin-bottom: 0;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 15px;
}

.filter-item label {
  white-space: nowrap;
  font-weight: 500;
  color: #333;
  min-width: 50px;
  font-size: 14px;
}

.filter-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

.table-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

:deep(.el-table) {
  border-radius: 4px;
}

:deep(.el-table th) {
  background-color: #f8f9fa;
  color: #333;
  font-weight: 600;
}

:deep(.el-table--border) {
  border: 1px solid #e4e7ed;
}

:deep(.el-select) {
  width: 140px;
}

:deep(.el-input__inner) {
  height: 32px;
  line-height: 32px;
}

:deep(.el-button) {
  height: 32px;
  padding: 8px 15px;
}

:deep(.el-date-editor) {
  height: 32px;
}

:deep(.el-date-editor .el-input__inner) {
  height: 32px;
}

/* 汇总行样式 */
:deep(.el-table__footer-wrapper) {
  .el-table__footer {
    .cell {
      font-weight: 600;
      color: #303133;
      background-color: #f8f9fa;
    }
  }
}

:deep(.el-table__footer-wrapper tr:first-child td:first-child .cell) {
  color: #409EFF;
  font-weight: 700;
}
</style>
